<template>
    <div class="wrap-draggable">
        <draggable
            v-model="uploadPics"
            :draggable="a"
        >
            <div
                v-for="(pic, picIndex) in uploadPics"
                :key="'pic'+picIndex"
                class="el-upload-list__item dragglable-upload-item"
                :class="'is-'+ pic.status"
                style="pointer-events: auto"
            >
                <img
                    :src="pic.url"
                    alt=""
                    class="el-upload-list__item-thumbnail"
                >
                <a class="el-upload-list__item-name">
                    <i class="el-icon-document" />
                </a>
                <label
                    class="first-tip"
                    v-if="picIndex == 0"
                >
                    宝贝主图
                </label>
                <label class="el-upload-list__item-loading-label">
                    <i class="el-icon-upload-uploading el-icon-loading" />
                </label>
                <i class="el-icon-close" />
                <i class="el-icon-close-tip">按 delete 键可删除</i>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview">
                        <i
                            class="el-icon-zoom-in"
                            @click="handlePictureCardPreview(pic)"
                        />
                    </span>
                    <!--<span class="el-upload-list__item-delete"><i
                        class="el-icon-delete"
                        @click="handleRemove(pic)"
                    /></span>-->
                </span>
            </div>
        </draggable>
        <el-upload
            class="avatar-uploader-small"
            slot="footer"
            action="upload"
            accept="image/*"
            multiple
            list-type="picture-card"
            :show-file-list="false"
            :file-list="uploadPics"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="fnChangeUpload"
            :http-request="fnUploadImage"
            :limit="5"
            :on-exceed="uploadExceed"
        >
            <i class="el-icon-upload" />
            <span class="el-upload-text">点击上传</span>
        </el-upload>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
    components: {
        draggable
    },
    props: {
        value: {
            type: Array,
            required: true
        },
        a: {
            type: String,
            required: true
        }
    },
    data() {
        return {
        };
    },
    computed: {
        uploadPics: {
            get(){
                return this.value;
            },
            set(val){
                this.$emit('input', val);
            }
        }
    },
    methods: {
        fnChangeUpload(file, fileList) {
            this.uploadPics = fileList;
        },
        fnUploadImage(e) {
            let pic = new FormData();

            pic.append('image', e.file);
            this.$upload('/Upload/image', pic).then(resp => {
                if (resp.code == 1) {
                    // 调用组件成功回调,修改样式
                    e.onSuccess(resp.data, {
                        name: name,
                        url: resp.data.url
                    }, this.uploadPics);
                } else {
                    // 失败后调用组件error回调,删除对应元素
                    e.onError(resp.msg);
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        cneter: true
                    });
                }
            });
        },
        handleRemove(file) {
            for (var i in this.uploadPics) {
                if (this.uploadPics[i].uid == file.uid) {
                    this.uploadPics.splice(i, 1);
                }
            }

        },
        handlePictureCardPreview(file) {
            this.$emit('showImg', file.url);
        },
        uploadExceed() {
            this.$message({
                type: 'warning',
                message: '最多上传5张图片',
                cneter: true
            });
        },
    }
};

</script>

<style lang="less" scoped>
.wrap-draggable {
    display: flex;
    .dragglable-upload-item {
        width: 90px;
        height: 90px;
    }
}
</style>
